<template>
  <view class="message-audio d-r" :class="['content content-' + message.flow]" :style="{width:width}"  @tap="handlePlay" ref="mes_content" @longpress="showControl">


    <image v-if="message.flow==='in'&&!isPlay" class="audio-icon audio-icon-in" src="../../../../assets/icon/audio-play.png"></image>
    <image v-if="message.flow==='in'&&isPlay" class="audio-icon audio-icon-in" src="../../../../assets/icon/audio-play.gif"></image>
	<text class="text">{{data.second}} ''</text>

	<image v-if="message.flow==='out'&&!isPlay" class="audio-icon audio-icon-out " src="../../../../assets/icon/audio-play1.png"></image>
	<image v-if="message.flow==='out'&&isPlay" class="audio-icon audio-icon-out " src="../../../../assets/icon/audio-play1.gif"></image>
        

<!-- 		<view class="play-icon" v-if="message.flow==='in' && !isPlay" ></view>
 -->  
 </view>
</template>

<script lang="ts">
import { defineComponent,watchEffect, reactive, toRefs, ref, onMounted,onUnmounted,computed } from 'vue';
const audio = uni.createInnerAudioContext();
const MessageAudio = defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
		messageData: {
			type: Object,
			default: () => {
				return {};
			}
		}
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      data: {},
			message: {},
			isPlay: false,
    });


		
    watchEffect(()=>{
      data.data = props.data;
			data.message = props.messageData;
    });

    const stop = ()=>{
        audio.stop();
        data.isPlay = false;
    }

    const width =computed(()=>{
        let num = 120+data.data.second*10;
        return `${num}rpx`

    })

		
		onMounted(() => {
            uni.$on('stopMedia',stop)
			audio.onPlay(() => {
				console.log('开始播放');
			});
			audio.onEnded(() => {
                data.isPlay = false;
				console.log('停止播放');
			});
			audio.onError(e => {
				console.error(e, 'onError');
				// ios 音频播放无声，可能是因为系统开启了静音模式
				uni.showToast({
					icon: 'none',
					title: '该音频暂不支持播放'
				});
			});
			
		})
		onUnmounted(() => {
            uni.$off('stopMedia',stop)
		})
		
    const handlePlay = () => {

            if(data.isPlay){
                audio.stop();
                data.isPlay = false
            }else{
                uni.$emit('stopMedia');
                if (data.data.url) {
                    audio.src = data.data.url;
                    audio.play();
                    data.isPlay = true
                }

            }

    };

    const mes_content = ref(null);
        const showControl = async () => {
            let refPos = null;

            await new Promise((callback) => {
                const dom = weex.requireModule("dom");
                dom.getComponentRect(mes_content.value, (e) => {
                    refPos = e.size;
                    console.log("aaaaaaaaa");
                    console.log("aaaaaaaaa");
                    console.log(e);
                    callback(e);
                });
            });
            console.log(refPos);
            const obj = {
                refPos,
                message: data.message,
            };
            uni.$emit("showControl", obj);
        };

    return {
      ...toRefs(data),
      audio,
      handlePlay,
      width,
      mes_content,
      showControl
    };
  }
});
export default MessageAudio
</script>
<style lang="scss" scoped>
.message-audio {
  display: flex;
  min-width:120rpx;
  max-width:350rpx;
  align-items: center;
  position: relative;
    .icon {
        margin: 0 4px;
    }
	.audio-icon {
		width: 18px;
		height: 18px;
	}
	.audio-icon-in {
        margin-right:5px;
	}
	.audio-icon-out {
        transform: rotate(180deg);
        margin-left:5px;
	}
	.play-icon {
		position: absolute;
		right: -7px;
		top: 1px;
		width: 6px;
		height: 6px;
		border-radius: 100%;
		background-color: #f73232;
	}
  audio {
    width: 0;
    height: 0;
  }
}
.reserve {
  flex-direction: row-reverse !important;
}
// .mask {
//   position: fixed;
//   width: 100vw;
//   height: 100vh;
//   top: 0;
//   left: 0;
//   opacity: 0;
//   z-index: 1;
// }
.content {
    padding:10px;
        border-radius: 30px;
        // .dot{
        // width:0;
        // height:0;
        // border:none;
        // border-left:10rpx solid transparent;
        // border-right:10rpx solid transparent;
        // border-top:10rpx solid transparent;
        // border-bottom:10rpx solid transparent;
        // &.in{
        //     position:absolute;
        //     border-right:10rpx solid #fff;
        //     top:22rpx;
        //     left:-17rpx;
        // }

        // &.out{
        //     position:absolute;
        //     border-left:10rpx solid #1DC691;
        //     top:22rpx;
        //     right:-17rpx;
        // }

    //}

    &-in {
      background: #fff;
      .text{
        font-size:18px;
        color:$slim_text3;
      }
    }
    &-out {
      background: #1DC691;
      .text{
        font-size:18px;
        color:#fff;
      }
      justify-content: flex-end;
    }
  }
</style>
